<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="title">我的博客</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="CSS/mybloglist.css">
</head>
<body>

<!--导航栏-->
<div class="nav">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md4">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="images/logo.png" alt="">
                    <span>博客系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="grid-demo"></div>
        </div>


        <!--        <div class="layui-col-md1">-->
        <!--            <div class="grid-demo grid-demo-bg1">-->
        <!--                <img src="images/user.png" alt="">-->
        <!--                <span id="user"></span>-->
        <!--            </div>-->
        <!--        </div>-->
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <img src="images/myblog.png" alt="">
                    <span>我的博客</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <img src="images/collect.png" alt="">
                    <span>博客列表</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogPublish.html">
                    <img src="images/write.png" alt="">
                    <span>发布博客</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="javascript:logout()">
                    <img src="images/logout.png" alt="">
                    <span>退出登录</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!-- 左侧个人信息 -->
    <div class="container-left">
        <div class="card">
            <img src="images/photo.jpg" class="avtar" alt="">
            <h3 id="username"></h3>
            <a href="https://blog.csdn.net/m0_63463510?type=blog">CSDN</a>
            <a href="https://gitee.com/anluo-bww">Gitee</a>
            <div class="counter">
                <span>文章</span>
                <span>分类</span>
            </div>
            <div class="counter">
                <span id="artCount"></span>
                <span id="type"></span>
            </div>
        </div>
    </div>
    <!-- 右侧内容详情 -->
    <div class="container-right">
        <div id="artDiv">
            <!-- 每一篇博客包含标题, 摘要, 时间 -->


        </div>
    </div>
</div>
<script>
    // 获取用户信息
    function showUserInfo() {
        $.ajax({
            type: 'post',
            url: '/user/showuserinfo',
            data: {},
            success: function (body) {
                if (body && body.code === 200) {
                    document.querySelector('#username').innerHTML = body.data.username;
                    document.querySelector('#artCount').innerHTML = body.data.artCount;
                    document.querySelector('#type').innerHTML = body.data.type;
                } else {
                    alert('个人信息加载失败,请稍后再试!');
                }
            }
        })
    }

    showUserInfo();

    let pindex = 1;
    let psize = 5;

    function
    getMyBlogList() {
        $.ajax({
            type: 'post',
            url: '/art/mybloglist',
            data: {
                pindex: pindex,
                psize: psize
            },
            success: function (body) {
                if (body && body.code === 200) {
                    // 两种情况,有无有发表文章
                    if (body.data && body.data.length > 0) {
                        // 发表文章了
                        let container = document.querySelector('#artDiv');
                        for (let blog of body.data) {
                            // 构造blog div
                            let blogDiv = document.createElement('div');
                            blogDiv.className = 'blog';

                            // 构造博客标题
                            let titleDiv = document.createElement('div');
                            titleDiv.className = 'title';
                            titleDiv.innerHTML = blog.title;

                            // 构造博客时间
                            let dateDiv = document.createElement('div');
                            dateDiv.className = 'date';
                            dateDiv.innerHTML = blog.updateTime;

                            // 构造摘要
                            let descDiv = document.createElement('div');
                            descDiv.className = 'desc';
                            descDiv.innerHTML = blog.content;

                            // 构造查看全文按钮
                            let a = document.createElement('a');
                            a.className = 'detail';
                            a.href = "blogEdit.html?id=" + blog.id;
                            a.innerHTML = '修改文章 &gt;&gt;';

                            let a1 = document.createElement('a');
                            a1.className = 'detail';
                            a1.href = 'blogDetail.html?id=' + blog.id;
                            a1.innerHTML = '查看全文 &gt;&gt;';

                            let a2 = document.createElement('a');
                            a2.className = 'detail';
                            a2.href = 'javascript:myDel(' + blog.id + ')';
                            a2.innerHTML = '删除文章 &gt;&gt;';

                            let subDiv = document.createElement('div');
                            subDiv.className = 'sub';
                            subDiv.appendChild(a);
                            subDiv.appendChild(a1);
                            subDiv.appendChild(a2);

                            // 进行拼装
                            blogDiv.appendChild(titleDiv);
                            blogDiv.appendChild(dateDiv);
                            blogDiv.appendChild(descDiv);
                            blogDiv.appendChild(subDiv);
                            container.appendChild(blogDiv);
                        }
                    } else {
                        jQuery("#artDiv").html('<h3>暂无博客,快来发布博客吧!</h3>')
                    }
                } else {
                    alert('查询文章列表出错,请重试!')
                }
            }
        })
    }

    getMyBlogList();

    function myDel(id) {
        if (confirm("确认是否删除?")) {
            $.ajax({
                type: 'post',
                url: '/art/delete',
                data: {
                    "id": id
                },
                success: function (body) {
                    if (body && body.code === 200 && body.data === 1) {
                        location.assign('myblog.html');
                    } else {
                        alert('删除失败!');
                    }
                }
            })
        }
    }
</script>
</body>
</html>